<template>
  <div class="l-from-body">
    <el-form :model="formData" :rules="rules" size="mini" ref="form" label-width="80px">
      <el-col :span="24" v-if="lr_hasPageAuth('f_DBName')">
        <el-form-item label="编码" prop="f_DBName">
          <el-input v-model="formData.f_DBName" @input="codeInput"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24" v-if="lr_hasPageAuth('f_DBAlias')">
        <el-form-item label="名称" prop="f_DBAlias">
          <el-input v-model="formData.f_DBAlias" @input="nameInput"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="类型" prop="f_DbType">
          <l-select
            :clearable="false"
            @change="handleTypeChange"
            :options="options"
            v-model="formData.f_DbType"
          ></l-select>
        </el-form-item>
      </el-col>
      <el-col :span="24" v-if="lr_hasPageAuth('f_DbConnection')">
        <el-form-item label="连接串" prop="f_DbConnection">
          <el-input v-model="formData.f_DbConnection">
            <el-button slot="append" @click="handleTest" :loading="testLoading">测试连接</el-button>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="24" v-if="lr_hasPageAuth('f_Description')">
        <el-form-item label="说明" prop="f_Description">
          <el-input type="textarea" v-model="formData.f_Description"></el-input>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>
<script>
const api = window.$api.data.dblink;
var lr_existDbFiled = function (rule, value, callback) {
  //console.log(value);
  var z = value.match(/^[a-zA-Z][a-zA-Z0-9]{0,32}/);
  if (value.length == 0) {
    return callback(new Error("不能为空"));
  } else if (!z) {
    return callback(new Error("只能输入首字符字母，数字"));
  } else {
    return callback();
  }
};
export default {
  data() {
    return {
      formData: {
        f_DBName: "",
        f_DBAlias: "",
        f_DbType: "",
        f_DbConnection: "",
        f_Description: "",
      },
      rules: {
        f_DBName: [
          { required: true, validator: lr_existDbFiled },
          {
            validator: this.lr_existDbFiled,
            keyValue: () => {
              return this.formData.f_DatabaseLinkId;
            },
            tableName: "lr_base_databaselink",
            keyName: "f_DatabaseLinkId",
            trigger: "null",
          },
        ],
        f_DBAlias: [{ required: true, validator: lr_existDbFiled }],
        f_DbConnection: [{ required: true, message: "请输入数据库链接串" }],
      },
      options: [
        { value: "MySql", label: "MySql" },
        { value: "SqlServer", label: "SqlServer" },
        { value: "Oracle", label: "Oracle" },
        { value: "PostgreSQL", label: "PostgreSQL" },
        { value: "Dameng", label: "达梦" },
        { value: "Kdbndp", label: "人大金仓" },
      ],
      link: {
        SqlServer: "server=.;uid=sa;pwd=haosql;database=xxx",
        MySql:
          "server=top1.zongheng-cloud.com;Database=xxx;Uid=root;Pwd=huangyong;Port=3306;Allow User Variables=True;Charset=utf8",
        Oracle: "Data Source=localhost/orcl;User ID=system;Password=haha;",
        PostgreSQL: "PORT=5432;DATABASE=xxx;HOST=localhost;PASSWORD=haosql;USER ID=postgres",
        Dameng: "Server=localhost; User Id=SYSDBA; PWD=SYSDBA;DATABASE=xxx",
        Kdbndp: "Server=127.0.0.1;Port=54321;UID=SYSTEM;PWD=system;database=xxx",
      },
      link2: {},
      testLoading: false,
    };
  },
  computed: {},
  created() {
    this.link2 = this.$deepClone(this.link);
  },
  methods: {
    //编码输入
    codeInput() {
      this.strFill();
    },

    //名称输入
    nameInput() {
      this.strFill();
    },

    strFill() {
      for (let key in this.link) {
        this.link2[key] = this.link[key].replace(/xxx/gi, this.formData.f_DBAlias);
      }
      this.handleTypeChange();
      /*
			var s="&code="+this.formData.f_DBName;
			for(let key in this.link){
				console.log(key);
			}
			var link=JSON.stringify(this.link);
			link=link.replace(/xxx/gi, e);
			this.link2=JSON.parse(link);
			this.handleTypeChange();
			*/
    },

    resetForm() {
      this.$refs.form && this.$refs.form.resetFields();
    },
    // 校验表单
    validateForm(callback) {
      this.$refs.form.validate((valid) => {
        callback(valid);
      });
    },
    setForm(data) {
      this.formData = this.$deepClone(data);
      this.formData.f_RuleFormatJson && (this.ruleFormat = JSON.parse(this.formData.f_RuleFormatJson));
    },
    getForm() {
      let formData = this.$deepClone(this.formData);
      formData.f_RuleFormatJson = JSON.stringify(this.ruleFormat);
      return formData;
    },
    handleTypeChange() {
      //console.log(this.formData.f_DbType);
      if (this.formData.f_DbType) this.formData.f_DbConnection = this.link2[this.formData.f_DbType];
    },
    handleTest() {
      const req = {
        connection: this.formData.f_DbConnection,
        dbType: this.formData.f_DbType,
        id: this.formData.f_DatabaseLinkId,
        code: this.formData.f_DBName,
      };
      if (!req.connection) {
        this.$message({
          type: "error",
          message: "请填写连接串!",
        });
        return;
      }
      this.testLoading = true;
      api
        .test(req)
        .then((res) => {
          if (res.data.data) {
            this.$message({
              type: "success",
              message: "测试成功!",
            });
          } else {
            this.$message({
              type: "error",
              message: res.data.info,
            });
          }
          this.testLoading = false;
        })
        .catch(() => {
          this.testLoading = false;
        });
    },
  },
};
</script>
